<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <!--引入jquery-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--引入echarts插件-->
    <script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 线索增量折线图
            $.ajax({
                url: 'workbench/chart/clue/queryCountGroupByCreateTime',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var myChart = echarts.init(document.getElementById('main1'));

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '线索统计图表',
                            subtext: '线索每月增量变化趋势'
                        },
                        xAxis: {
                            type: 'category',
                            data: data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: data.data,
                                type: 'line',
                                smooth: true
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });



            // 线索来源饼图
            $.ajax({
                url: 'workbench/chart/clue/queryCountGroupBySource',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var myChart = echarts.init(document.getElementById('main2'));

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '线索统计图表',
                            subtext: '线索来源',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: data
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });

            // 线索阶段饼图
            $.ajax({
                url: 'workbench/chart/clue/queryCountGroupByState',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var myChart = echarts.init(document.getElementById('main3'));

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '线索统计图表',
                            subtext: '线索阶段',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: data
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        });
    </script>
</head>
<body>
<div style="width: 90%">
    <div id="main1" style="width: 40%;height:300px ;float: left; margin-left: 3%;"></div>
    <div id="main2" style="width: 40%;height:300px ;float: left; margin-right:  3%;"></div>
    <div id="main3" style="width: 40%;height:300px"></div>
</div>
</body>
</html>